{% extends 'base/base.html' %}
{% block title %}
    首页
{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/news/index.css' %}">

{% endblock %}
{% block main %}
    <!-- main start -->
    <main id="main">
        <div class="w1200 clearfix">
            <!-- main-contain start  -->
            <div class="main-contain">
                <!-- banner start -->
                <div class="banner">
                    <div class="viewpanger">
                        <ul class="pic">
                            {% for banner in banners %}
                                <li>
                                    <a href="javascript:void(0);" target="_blank">
                                        <img src="{{ banner.img_url }}" alt="">
                                    </a>
                                </li>
                            {% endfor %}

{##}
{#                            <li>#}
{#                                <a href="javascript:void(0);" target="_blank">#}
{#                                    <img src="{% static 'images/linux.jpg' %}" alt="">#}
{#                                </a>#}
{#                            </li>#}
{#                            <li>#}
{#                                <a href="javascript:void(0);" target="_blank">#}
{#                                    <img src="{% static 'images/linux.jpg' %}" alt="">#}
{#                                </a>#}
{#                            </li>#}
{#                            <li>#}
{#                                <a href="javascript:void(0);" target="_blank">#}
{#                                    <img src="{% static 'images/linux.jpg' %}" alt="">#}
{#                                </a>#}
{#                            </li>#}
                        </ul>
                        <ul class="tab">
                            {% for banner in banners %}
                             <li></li>
                            {% endfor %}
{#                            <li></li>#}
{#                            <li></li>#}
{#                            <li></li>#}
                        </ul>
                        <ul class="btn">
                            <li class="iconfont icon-lunbozuofangun"></li>
                            <li class="iconfont icon-lunboyoufangun"></li>
                        </ul>
                    </div>

                </div>
                <!-- banner end -->

                <!-- content start -->
                <div class="content">
                    <!-- recommend-news start -->
                    <ul class="recommend-news">
                        {% for hot_article in hot_articles %}
                            <li>
                                <a href="{% url 'news:article_detail' hot_article.article.id %}" target="_blank">
                                    <div class="recommend-thumbnail">
                                        <img src="{{ hot_article.article.thumbnail }}">
                                    </div>
                                    <p class="info">{{ hot_article.article.title }}</p>
                                </a>
                            </li>

                        {% endfor %}



                        {#                        <li>#}
                        {#                            <a href="javascript:void(0);" target="_blank">#}
                        {#                                <div class="recommend-thumbnail">#}
                        {#                                    <img src="{% static 'images/python_gui.jpg' %}" alt="title">#}
                        {#                                </div>#}
                        {#                                <p class="info">python高性能编程方法一</p>#}
                        {#                            </a>#}
                        {#                        </li>#}
                        {##}
                        {#                        <li>#}
                        {#                            <a href="javascript:void(0);" target="_blank">#}
                        {#                                <div class="recommend-thumbnail">#}
                        {#                                    <img src="{% static 'images/python_gui.jpg' %}" alt="title">#}
                        {#                                </div>#}
                        {#                                <p class="info">python基础 split 和 join函数比较</p>#}
                        {#                            </a>#}
                        {#                        </li>#}
                    </ul>
                    <!-- recommend-news end -->

                    <!--  news-nav start-->
                    <nav class="news-nav">
                        <ul class="clearfix">
                            <li class="active"><a href="javascript:void(0)">最新资讯</a></li>
                            {% for tag in tags %}
                                <li><a href="javascript:void(0)" data-id={{ tag.id }}>{{ tag.name }}</a>
                                </li>
                            {% endfor %}

                        </ul>
                    </nav>
                    <!--  news-nav end -->
                    <!-- news-contain start -->
                    <div class="news-contain">
                        <ul class="news-list">
                            {#                            <li class="news-item">#}
                            {#                                <a href="javascript:void(0);" class="news-thumbnail"#}
                            {#                                   target="_blank">#}
                            {#                                    <img src="{% static 'images/linux.jpg' %}" alt="linux查找文件或目录命令"#}
                            {#                                         title="linux查找文件或目录命令">#}
                            {#                                </a>#}
                            {#                                <div class="news-content">#}
                            {#                                    <h4 class="news-title"><a#}
                            {#                                            href="#">linux查找文件或目录命令</a>#}
                            {#                                    </h4>#}
                            {#                                    <p class="news-details">linux查找文件或目录命令，前提：知道文件或者目录的具体名字，例如：sphinx.conffind 查找find /#}
                            {#                                        -name#}
                            {#                                        dirname 查找目录find -name...</p>#}
                            {#                                    <div class="news-other">#}
                            {#                                        <span class="news-type">Linux教程</span>#}
                            {#                                        <span class="news-time">11/11 18:24</span>#}
                            {#                                        <span class="news-author">python</span>#}
                            {#                                    </div>#}
                            {#                                </div>#}
                            {#                            </li>#}
                            {##}
                        </ul>
                    </div>
                    <!-- news-contain end -->


                    <!-- btn-more start -->
                    <a href="javascript:void(0);" class="btn-more">加载更多</a>

                    <!-- btn-more end -->
                </div>
                <!-- content end -->
            </div>
            <!-- main-contain  end -->
            {% include 'base/side.html' %}
        </div>

    </main>
    <!-- main end -->
{% endblock %}
{% block script %}
    <script src="{% static 'js/index.js' %}"></script>
    <script src="{% static 'js/article_list.js' %}"></script>
{% endblock %}